<template>
  <div class="journalism">
    <div @click="clicks($event)">
      <vue-seamless-scroll
        :data="journalismData"
        class="seamless-warp1"
        :class-option="classOption"
      >
        <div
          class="journalism-in"
          v-for="(item,index) in journalismData"
          :key="index"
          :data-id="item.id"
        >
          <div class="journalism-in-num" :data-id="item.id">{{index+1}}</div>
          <div class="journalism-in-content" :data-id="item.content">
            <div class="journalism-in-content-top" :data-id="item.id">
              <span :data-id="item.id">{{item.content}}</span>
              <span :data-id="item.id">《{{item.title}}》</span>
            </div>
            <div class="journalism-in-content-bottom" :data-id="item.id">
              <span :data-id="item.id">获赞：{{item.num}}</span>
              <span :data-id="item.id">{{item.time}}</span>
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>

    <!-- 弹窗 -->
    <div class="popup" v-if="popShow">
      <div class="close" @click="function(){popShow = false}"></div>
      <div class="popup-in">
        <iframe
          v-if="src != ''"
          :src="src"
          style="width: 990px;height: 100%;margin-top: 5px;-ms-zoom: 0.75;"
        ></iframe>
      </div>
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import apis from "../../public/api";

export default {
  name: "journalism",
  components: {
    //组件
    vueSeamlessScroll
  },
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        src: ""
      };
    }
  },
  data() {
    return {
      popShow: false,
      journalismData: [],
      src: ""
    };
  },
  methods: {
    clicks(e) {
      console.log(e);
      console.log(e.target.dataset.id);
      this.popShow = true;
      //拼装url
      this.src =
        "http://121.248.63.144/media-view-content/#/screen-content-info?id=" +
        e.target.dataset.id +
        "&nsukey=p32k48SY3d%2BFefSnbwxvQPbqFBf17M4l9dfZtkVZ3cTW2OL00z3BmFuvXkottvpfMczEI7ZXgmlaQ5HkYN23AlNUt4kYnVzaauKuUB9m8D%2FFuoXyZpiaKIDbywI2X%2FY4IlYwPqsE8PZuDBLpjH2oSPhyLC1aM7o8Is6gtYpy2USv4q3vnRPqQ7SCqs1ILKmnZv%2BiUeDnG1CC32%2BdaZCB5g%3D%3D";
    }
  },
  mounted() {
    this.axios
      .get(apis.queryHotRemark, {
        //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
        params: {}
      })
      .then(res => {
        //此处要使用箭头函数，this指向才正确
        this.journalismData = res.data.result;
      })
      .catch(function(error) {
        alert(error);
      });
  }
};
</script>
<style lang="less" scoped>
.popup {
  position: absolute;
  height: auto;
  width: 990px;
  top: 0;
  right: 100px;
  display: block;
  border: 2px solid #727375;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 10px;
  padding: 0.2em;
  z-index: 999999;
  overflow: hidden;
  .close {
    cursor: pointer;
    position: absolute;
    right: 30px;
    top: 20px;
    background: url(../assets/close.png) no-repeat center center / 100% 100%;
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
  }
  &-in {
    width: 996px;
    padding-top: 50px;
    max-height: 800px;
    height: 800px;
    overflow-y: scroll;
    padding-right: 16px;
  }
}
</style>
<style lang="less">
.seamless-warp1 {
  overflow: hidden;
  width: 100%;
  margin-top: 30px;
  height: 220px;
}

.journalism {
  padding: 15px 30px;
  width: 100%;
  height: 294px;
  margin-bottom: 32px;
  background: url(../assets/img/border5-1.png) no-repeat center center / 100%
    100%;
  color: #bdbeca;
  font-size: 14px;
  .journalism-in {
    color: #a2f4f4;
    margin-top: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    &-num {
      width: 28px;
      display: block;
      margin-right: 4px;
    }

    &-content {
      width: 90%;
      &-top {
        display: flex;
        margin-bottom: 6px;

        span:nth-child(1) {
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-right: 10px;
        }
        span:nth-child(2) {
          color: #30b3f7;
        }
      }
      &-bottom {
        display: flex;
        align-items: center;
        span:nth-child(1) {
          flex: 1;
          color: #ef8a1d;
        }
      }
    }
  }
}
</style>
